<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <cus-nav></cus-nav>
        <b-com></b-com>
        <cus-item></cus-item>
    </div>
    <script src='./vue.js'></script>
    <script>
        // 局部组件
        // 只能在当前的Vue实例中使用
        // 1. 通过选项components定义组件
        // 2. 使用组件

        var bCom = {
            // 选项:值
            template: `
<div>
    {{msg}}
</div>
`,
            data() {
                return {
                    msg: 'abc'
                }
            }
        };

        var cusNav = {
            // 选项:值
            template: `
                <div>我是导航</div>
            `
        };

        var cusItem = {
            // 选项:值
            template: `<div>我是列表</div>`
        };

        new Vue({
            el: '#app',
            data: {},
            components: {
                'b-com': bCom,
                'cus-nav': cusNav,
                'cus-item': cusItem
            },
            methods: {

            }
        });
    </script>
</body>

</html>